<template>
  <div
    ref="box"
    v-loading="loadCount < 1 && !browserFlag"
    class="all-full pdf-box"
    element-loading-text="pdf加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-progress
      v-if="percentage && percentage < 100 && !browserFlag"
      class="full-width progress"
      :text-inside="true"
      :stroke-width="15"
      :percentage="percentage"
    ></el-progress>
    <canvas
      v-for="item in pdfNumPages"
      :key="item"
      ref="pdf"
      class="pdf-content full-width"
      :class="{ hidden: item > loadCount }"
    ></canvas>
    <iframe
      v-if="browserFlag"
      :src="fileData.url"
      class="all-full iframe"
    ></iframe>
  </div>
</template>

<script>
import { browser } from "./resources";
import mixins from "./resourceShowMixins";
export default {
  name: "PdfResource",
  mixins: [mixins],
  data () {
    return {
      fileData: {
        url: null,
        name: null,
      },
      pdfNumPages: 0,
      loadCount: 0,
      qp: false,
      browserFlag: false,
    };
  },
  computed: {
    percentage () {
      if (this.pdfNumPages === 0) return 0;
      return parseInt((this.loadCount / this.pdfNumPages) * 100);
    },
  },
  methods: {
    getPDFJS () {

      if (this.PDFJS) {
        return this.PDFJS;
      }
      const PDFJS = require("vue-pdf/src/vuePdfSss").default.PDFJS;
      this.PDFJS = PDFJS;
      return PDFJS;
    },
    show () {

      if (!window) {
        return;
      }
      const b = browser();
      if (b & 0x0f) {
        this.browserShow();
        return;
      }
      let loadingTask = this.getPDFJS().getDocument(
        this.coverImage(this.resource.resourceUrl)
      );
      loadingTask.promise.then((pdf) => {
        this.pdfNumPages = pdf.numPages;
        const width = this.$refs.box.offsetWidth;
        this.$nextTick(async () => {
          for (let i = 1; i <= pdf.numPages; i++) {
            await pdf.getPage(i).then((page) => {
              let viewport = page.getViewport({
                scale: 5,
                rotation: 0,
              });
              let canvas = this.$refs.pdf[i - 1];
              let context = canvas.getContext("2d");
              canvas.width = viewport.width;
              canvas.height = viewport.height;
              let renderContext = {
                canvasContext: context,
                viewport,
              };
              return page.render(renderContext).promise;
            });
            this.loadCount++;
          }
        });
      });
    },
    browserShow () {
      console.log(this.resource.resourceUrl);
      this.fileData = {
        url: this.coverImage(this.resource.resourceUrl),
        name: this.fileNameSplit(this.resource.name),
      };
      this.browserFlag = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.pdf-box {
    width: 100%;
    height: 100%;
  ::v-deep .progress {
    height: 15px;
    margin: 0;
    .el-progress-bar {
      display: block;
    }
    .el-progress-bar__inner,
    .el-progress-bar__outer {
      border-radius: 0;
    }
    .el-progress-bar__inner {
      line-height: unset;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
  .iframe {
    border: none;
    width: 100%;
    height: 100%;
  }
}
</style>
